<!-- 钱包交易分页列表 -->
<template>
    <div class="travel-wallet-list">
        <div ref="dgtools" class="filter-container">
            <el-form 
                :model="dg.ps" 
                :inline="true" 
                @keyup.enter.native="getDgList">
                <el-form-item>
                    <el-date-picker
                        v-model="dg.ps.sedate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 220px"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-input
                        style="width: 220px"
                        clearable
                        placeholder="订单号（支持模糊查询）"
                        v-model="dg.ps.assist">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-select
                        v-model="dg.ps.atype"
                        placeholder="金额类型"
                        style="width: 150px"
                        clearable>
                        <el-option 
                            v-for="it in dg.atypeArr"
                            :key="it.value"
                            :label="it.label" 
                            :value="it.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-select
                        v-model="dg.ps.types"
                        placeholder="交易类型"
                        style="width: 220px"
                        multiple 
                        collapse-tags
                        clearable>
                        <el-option 
                            v-for="it in dg.typeArr"
                            :key="it.value"
                            :label="it.label" 
                            :value="it.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-button 
                    type="primary" 
                    icon="el-icon-search" 
                    @click="getDgList">
                    搜索
                </el-button>
                <el-button 
                    type="primary" 
                    icon="el-icon-s-finance" 
                    @click="setWalletInfoMd({state: true})">
                    钱包信息
                </el-button>
            </el-form>

            <TableSelfSet 
                v-if="dg.columns.length > 0" 
                :tbTitle="'旅行社交易记录列表'" 
                :dgName="dg.dgName" 
                :tbId="dg.tbName" 
                :srcCols="dg.srcCols" 
                :columns="dg.columns" 
                @saveSet="saveTbSet"
            />
        </div>
        <el-table
            :ref="dg.tbName"
            :data="dg.list"
            row-key="id"
            :height="bodyHeight"
            border fit 
            :row-class-name="rowClassName"
            @header-dragend="dragHeader"
            @selection-change="selRowChange">
            <el-table-column 
                fixed="left" 
                type="index" 
                label="编号" 
                width="40" 
                align="center">
            </el-table-column>
            <el-table-column 
                fixed="left" 
                type="selection" 
                width="40" 
                align="center">
            </el-table-column>

            <el-table-column 
                v-for="(col, index) in dg.columns" 
                :key="index"
                :class-name="dg.dgName"
                :prop="col.field"
                :label="col.label"
                :width="col.width">
                <template slot-scope="{row}">
                    <template v-if="col.field == 'type'">
                        <span>{{U.getLVText(dg.typeArr, row.type)}}</span>
                    </template>

                    <template v-else-if="col.field == 'baseUserId'">
                        <span>{{row.baseUserId.realName}}{{ `（${row.baseUserId.phone}）` }}</span>
                    </template>

                    <template v-else-if="col.field == 'atype'">
                        <span>{{U.getLVText(dg.atypeArr, row.atype)}}</span>
                    </template>

                    <template v-else-if="col.field == 'status'">
                        <span>{{row.status === 1 ? '支出' : '收入'}}</span>
                    </template>

                    <template v-else-if="col.field == 'note'">
                        <span>{{row.note}}</span>
                    </template>

                    <span v-else-if="col.field == 'atime'">
                        {{row.atime}}
                    </span>

                    <template v-else>{{ getColVal(row, col.field) }}</template>
                </template>
            </el-table-column>
        </el-table>
        <Pagination 
            v-show="dg.total > 0" 
            :total="dg.total" 
            :page.sync="dg.ps.page" 
            :limit.sync="dg.ps.rows" 
            @pagination="getDgList"
        />

        <TravelWalletInfo 
            v-if="walletInfoMd.state"
            @myClick="setWalletInfoMd" 
        />
            
    </div>
</template>

<script>
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import elDragDialog from '@/directive/el-drag-dialog';
import TableSelfSet from '@/components/TableSelfSet';
import Pagination from '@/components/Pagination';

import TravelWalletInfo from './travel-wallet-info';

import * as financeService from '@/api/services/travel/finance.service';

export default {
    name: 'TravelWalletList',
    mixins: [ DataGridBase, DataGridResize],
    directives: { elDragDialog },
    components:{ TableSelfSet, Pagination, TravelWalletInfo },
    data() { 
        let cols = [
            { label: "用户信息", field: "baseUserId", width: 150 },
            { label: "交易类型", field: "type", width: 100 },
            { label: "金额类型", field: "atype", width: 80 },
            { label: "交易金额", field: "amoney", width: 100 },
            { label: "交易状态", field: "status", width: 70 },
            { label: "钱包余额", field: "cashBalance", width: 100 },
            { label: "订单号", field: "assist", width: 200 },
            { label: "交易时间", field: "atime", width: 130 },
            { label: "备注", field: "note", width: 200 },
        ];

        return {
            dg: {// 数据列表参数
                dgName: 'dg',
                tbName: 'travelWalletListTb',
                total: 0,
                list: [],
                srcCols: cols,
                columns: [],
                selRows: [],
                ps: { // 过滤参数
                    page: 1, rows: 20,
                    // 查询起止日期
                    sedate: [],
                    // 金额类型
                    atype: '',
                    // 交易类型
                    types: [],
                    // 领取人（支持模糊查询）
                    assist: '',
                },

                // 金额类型-数组
                atypeArr: [
                    {label: '余额', value: '1'},
                    {label: '冻结巴士币', value: '2'},
                    {label: '解冻巴士币', value: '3'},
                    {label: '第三方金额', value: '4'},
                    {label: '派单余额', value: '5'},
                    {label: '抢单余额', value: '6'},
                    {label: '垫支余额', value: '7'},
                    {label: '下账余额', value: '8'},
                    {label: '信用额度', value: '9'},
                ],
                // 交易类型-数组
                typeArr: [
                    {label: '付款', value: '0'},
                    {label: '押金认证', value: '1'},
                    {label: '付顺风车款', value: '2'},
                    {label: '行程团上现收', value: '3'},
                    {label: '订单完团', value: '4'},
                    {label: '退款', value: '5'},
                    {label: '推荐奖', value: '6'},
                    {label: '取消订单违约金', value: '7'},
                    {label: '指定接单返还折扣金', value: '8'},
                    {label: '完团奖励', value: '9'},
                    {label: '派单', value: '10'},
                    {label: '取消派单', value: '11'},
                    {label: '充值', value: '12'},
                    {label: '抢单赠送解冻巴士币', value: '13'},
                    {label: '顺风车订单返点奖励', value: '14'},
                    {label: '信用额度设置', value: '15'},
                ],

            },

            // 钱包信息-弹框
            walletInfoMd: {state: false},
        }
    },
    created() {
        const that = this;

        that.initTbSetData(that.dg.dgName);
        that.getDgList();
    },
    methods:{
        /** 获取-列表数据 */
        getDgList(){
            const that = this, ps = that.U.scopy(that.dg.ps);

            ps.stime = ps.sedate?.length ? ps.sedate[0] : '';
            ps.etime = ps.sedate?.length ? ps.sedate[1] : '';
            delete ps.sedate;
            ps.types = ps.types.join(',');

            financeService.getLWalletList(ps).then(res => {
                if(res.code == 1){
                    let list = res.data;

                    list.forEach(it => { it.dgName = that.dg.dgName; });
                
                    that.dg.list = list;
                    that.dg.total = res.count;
                }
            });
        },

        /** 打开/关闭-钱包信息-弹框 */
        setWalletInfoMd(e){
            const that = this, md = that.walletInfoMd;
            
            md.state = e.state;
        },
        
    },
 }
</script>